<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		div{
			width: 300px;
			height: 450px;
		}
		div img{
			width: 100%;
			height: 100%;
			transition: all 1s;

/*			filter:blur(10px);*/
/*			高斯模糊 数字越大越模糊  毛玻璃效果*/
/*			filter: brightness(50%);*/
/*			明亮程度 数值越小 越暗*/
/*			filter: grayscale(0%);*/
			filter: invert(60%);
/*			底片   反转输入图像  相机底片效果*/
		}
		div img:hover{
/*			filter:blur(0px) ;*/
/*			filter: brightness(150%);*/
/*			filter: grayscale(100%);*/
/*			灰度 0% 正常   100%黑白色*/
			filter: invert(0%);
		}
	</style>
</head>
<body>


	<div>
		<img src="../南方见.jpg">
	</div>


</body>
</html>